<template>
	<view class="main">
		<!-- 头像及用户名信息显示 -->
		<view class="top">
			<!-- 头像 -->
			<view v-if="userInfo.tbUser">
				<img :src="api.getUserLogo(userInfo.tbUser.uid)" class="avatar" />
			</view>
			<!-- 用户名、关注及粉丝等信息 -->
			<view class="user">
				<!-- 用户名 -->
				<view v-if="userInfo.tbUserInfo">
					<view class="nickname">
						<view v-if="!userInfo.tbUserInfo.nickname">暂未设置用户名</view>
						<view v-else>{{userInfo.tbUserInfo.nickname}}</view>
					</view>
				</view>
				<!-- UID -->
				<view v-if="userInfo.tbUser">
					<view class="info">UID：{{userInfo.tbUser.uid}}</view>
				</view>
				<!-- 性别、IP地址 -->
				<view class="user_flex">
					<view v-if="userInfo.tbUserInfo">
						<view class="info">
							<view v-if="userInfo.tbUserInfo.sex=='m'">♂ 男</view>
							<view v-if="userInfo.tbUserInfo.sex=='f'">♀ 女</view>
							<view v-if="userInfo.tbUserInfo.sex=='n'">保密</view>
						</view>
					</view>
					<view v-if="userInfo.citycode">
						<view class="info">IP：{{ userInfo.province }}{{ userInfo.city }}{{ userInfo.district }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 个性签名 -->
		<view v-if="userInfo.tbUserInfo">
			<view class="signature">
				<view v-if="userInfo.tbUserInfo.info">{{userInfo.tbUserInfo.info}}</view>
				<view v-else>系统原装签名，给每一位小可爱~</view>
			</view>
		</view>
		<!-- 关注和粉丝 -->
		<view v-if="userInfo.exInfo">
			<view class="attention">
				<view class="flex">
					<view class="followText">{{userInfo.exInfo.mineFollows}}</view>
					<view>关注</view>
				</view>
				<view class="flex">
					<view class="followText">{{userInfo.exInfo.followMines}}</view>
					<view>粉丝</view>
				</view>
			</view>
		</view>
		<!-- 我的发帖信息显示 -->
		<view class="card-box" v-for="d in list">
			<view class="top_card">
				<!-- 头像 -->
				<img :src="api.getUserLogo(d.uid)" class="avatar_card" />
				<!-- 用户名和时间 -->
				<view style="margin-left: 8px;">
					<view style="font-size: 15px; font-weight: bold;">
						<view v-if="!userInfo.tbUserInfo.nickname">暂未设置用户名</view>
						<view>{{userInfo.tbUserInfo.nickname}}</view>
					</view>
					<view style="font-size: 10px;">{{tools.formatDate(d.lastupdate)}}</view>
				</view>
			</view>
			<!-- 留言板标题 -->
			<view class="title" @click="showDetail(d)">{{d.title}}</view>
			<!-- 底部 -->
			<view class="footer">
				<!-- 点击量 -->
				<view>
					<uni-icons type="eye" size="15"></uni-icons>{{d.hits}}
				</view>
				<!-- 评论量 -->
				<view>
					<uni-icons type="fire" size="15"></uni-icons>{{d.reply}}
				</view>
				<!-- 点赞量 -->
				<view @click="praise(d)" class="praise" :class="{active:d.exInfo.praised}">
					<view v-if="!d.exInfo.praised"><uni-icons type="hand-up" size="15"></uni-icons></view>
					<view v-else><uni-icons color="#1890ff" type="hand-up" size="15"></uni-icons></view>
					{{d.praise}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import api from '../../script/api.js'
	import tools from '../../script/tools.js'

	// 跳转帖子详情
	const showDetail = (info) => {
		uni.navigateTo({
			url: `/pages/message/Detail?mid=${info.mid}`
		})
	}

	// 获取指定用户的信息
	const userInfo = ref({})
	const uid = ref(-1)
	const query = () => {
		api.get(`/user/${uid.value}`, {}, (resp) => {
			if (resp.success) {
				userInfo.value = resp.data
			}
		})
	}

	// 获取IP信息
	const ipInfo = ref({})
	const ip = () => {
		api.get('/tools/ipinfo', {
			ip: ''
		}, (resp) => {
			if (resp.success) {
				ipInfo.value = resp.data
				console.log("======>", resp)
			}

		})
	}

	// 获取指定用户的发帖
	const list = ref([])
	const page = ref({
		pageSize: 10,
		pageNumber: 1
	})
	const order = ref(1)
	const querymessage = () => {
		api.get(`/message/user/${uid.value}/${page.value.pageSize}/${page.value.pageNumber}/${order.value}`, {},
			(resp) => {
				if (resp.success) {
					list.value = resp.data.data
					page.value = resp.data.pageBean
				}
			})
	}

	// 点赞留言板按钮
	const praise = (pinfo) => {
		api.post(`/message/praise/${pinfo.mid}`, {}, (resp) => {
			if (resp.success) {
				pinfo.exInfo.praised = !pinfo.exInfo.praised
				pinfo.praise = pinfo.exInfo.praised ? pinfo.praise + 1 : pinfo.praise - 1
			} else if (resp.code == 1000) {
				uni.showToast({
					title: "请先登录",
					icon: 'error',
				})
			}
		})
	}

	onLoad((option) => {
		uid.value = option.uid
		console.log('setup this====>', uid.value, option)
		query()
		querymessage()
	})
</script>

<style lang="scss" scoped>
	.top_main {
		padding: 62rpx;
	}

	.logintitle {
		font-size: 48rpx;
		font-weight: 700;
		color: #1b2f29;
		margin-bottom: 200rpx;
	}

	.input {
		border-bottom: 0.5px solid #dcdcdc;
		margin-top: 30rpx;
		padding: 10px;

		&:hover {
			border-bottom: 0.5px solid #1890ff;
		}
	}

	.codeButton {
		font-size: 20rpx;
		color: #fff;
		background: #1890ff;
		border-radius: 3px;
		padding: 5px;
	}

	.loginbutton {
		margin: 50rpx 0px;
		color: #fff;
		background-color: #1890ff;
	}

	.main {
		padding: 10px 20px;
	}

	.bars {
		display: flex;
		justify-content: flex-end;
	}

	.scroll {
		height: 100%;
		box-sizing: border-box;
		background-color: #f8f8f8;
	}

	.scroll_top {
		font-size: 20px;
		text-align: center;
		font-weight: bold;
		border-left: #000;
		background-color: #fff;
		margin-bottom: 10px;
		padding: 8px 0;
	}

	.scroll_box {
		margin: 10px;
		padding: 10px;
		border-radius: 5px;
		background-color: #fff;
		// margin-bottom: 10px;
	}

	.scroll_box_view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.icon_right {
		display: flex;
		justify-content: flex-end;
	}

	.hr {
		border: 0.5px solid #dcdcdc;
		margin: 10px 0;
	}

	.scroll_box_logout {
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
		text-align: center; //文字水平居中
		color: #fff;
		background-color: #f00;
	}

	.top {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}

	.user {
		padding-left: 15px;
	}

	.user_flex {
		display: flex;
		gap: 15px;
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.nickname {
		display: flex;
		font-size: 20px;
		font-weight: bold;
		padding-bottom: 8px;
	}

	.info {
		font-size: 10px;
		padding-bottom: 8px;
		color: #686666;
	}

	.signature {
		padding: 10px;
	}

	.flex {
		display: flex;
		gap: 5px;
	}

	.followText {}

	.attention {
		display: flex;
		gap: 20px;
		padding: 10px;
	}

	.card-box {
		margin: 0; // 卡片外边距
		padding: 20px; // 卡片内边距
		overflow: hidden; // 溢出隐藏

		&:not(:last-child) {
			border-bottom: 0.1px solid #dcdcdc;
		}
	}

	.top_card {
		display: flex;
		align-items: flex-start;
	}

	.avatar_card {
		width: 38px;
		height: 38px;
		border-radius: 50%;
	}

	.title {
		display: inline-block;
		padding: 1rem 0px;
		font-size: 15px;
		cursor: pointer;
		transition: color 0.3s; //颜色转换时间

		&:hover {
			color: #1890ff;
		}
	}

	.active {
		color: #1890ff;
	}

	.title {
		display: inline-block;
		padding: 1rem 0px;
		font-size: 15px;
		cursor: pointer;
		transition: color 0.3s; //颜色转换时间

		&:hover {
			color: #1890ff;
		}
	}

	.active {
		color: #1890ff;
	}

	.footer {
		display: flex;
		font-size: 15px;
		gap: 8px 20px; //行间距
		align-items: center; //垂直居中
		justify-content: flex-end;
	}

	.praise {
		display: flex;
		align-items: center;
	}
</style>